var context		//context个体
var velocity	//玩家输入球的初始速度
var angle 	//玩家输入球的初始角度
var ballV 	//现在球的速度
var ballVx 	//现在球在X轴方向的速度
var ballVy	//现在球在Y轴方向的速度
var ballX = 10; 	//球现在在X方向的位置
var ballY = 250;	//球现在在Y方向的位置
var ballRadius = 10;	//球的半径
var score = 0; 		//分数
var image = new Image();	//生成图形个体
image.src = "lawn.png";
var backgroundImage = new Image();
backgroundImage.src = "net.png";
var timer	//时间个体变量

function init()
{
	ballX = 10; 	
	ballY = 250;	
	ballRadius = 10; 
	context = document.getElementById("canvas").getContext("2d");
	draw();
}

function start()
{
	init();
	velocity = Number(document.getElementById("velocity").value);
	angle = Number(document.getElementById("angle").value);
	var angleR = angle * Math.PI / 180;

	ballVx = velocity * Math.cos(angleR);
	ballVy = -velocity * Math.sin(angleR);

	draw();
	timer = setInterval(calculate, 100);
	return false;
}

function draw()
{
	context.clearRect(0, 0, 500, 300);
	drawBall();
	drawBackground();
}

function drawBall()
{
	context.beginPath();
	context.arc(ballX, ballY, ballRadius, 0, 2.0 * Math.PI, true);
	context.fillStyle = "red";
	context.fill();
}

function drawBackground()
{
	context.drawImage(image, 0, 270);
	context.drawImage(backgroundImage, 450, 60);
}

function calculate()
{
	ballVy += 1.98;

	ballX = ballX + ballVx;
	ballY = ballY + ballVy;

	if((ballX >= 450) && (ballX <= 480) && (ballY >= 60) && (ballY <= 210))
	{
		score++;
		document.getElementById("score").innerHTML = "分数 = " + score;
		clearInterval(timer);
		alert("加一分");
		resetGame();
	}

	if((ballY >= 300) || (ballY < 0))
	{
		clearInterval(timer);   
		alert("可惜");   
		resetGame();                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
	}

	draw();
}

function resetGame()
{
	ballX = 10; 	
	ballY = 250;	
	ballVx = 0;
	ballVy = 0;
}

function gameInitialize()
{
	score = 0;
	document.getElementById("score").innerHTML = "分数 = " + score;
}